import Vue from 'vue'
import Vuex from 'vuex'
import { loginAPI } from '@/api'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { // 定义全局状态变量
    token: localStorage.getItem('token') || '', // || 前面有值原地直接用, 前面无值(null, undefined, '', false), 就直接用后面的值在原地
    refresh_token: localStorage.getItem('refresh_token') || ''
  },
  getters: { // 类似全局计算属性
  },
  mutations: { // 唯一能同步修改state变量的地方 (同步: 函数内只能是同步代码)
    SET_TOKEN (state, value) {
      state.token = value // 把逻辑页面传给我的token字符串保存到vuex的state变量中
      localStorage.setItem('token', value)
    },
    SET_REFRESH_TOKEN (state, value) {
      state.refresh_token = value
      localStorage.setItem('refresh_token', value)
    }
  },
  actions: { // 异步操作, 要调用mutations把结果传递, 修改state变量里值
    async loginActions (store, value) { // 封装登录方法(便于登录逻辑的复用)
      // value逻辑页面传递过来的{}手机号和验证码和值
      try {
        const res = await loginAPI(value)
        store.commit('SET_TOKEN', res.data.data.token)
        store.commit('SET_REFRESH_TOKEN', res.data.data.refresh_token)
        return res // return到逻辑页面当中(async函数始终返回的是一个Promise对象, 所以你的结果会被当做Promise对象成功的结果返回)
      } catch (err) {
        return Promise.reject(err) // 返回一个失败状态Promise对象(并把失败结果带出去), 这样逻辑页面try+catch才能捕获到失败状态
      }
    }
  },
  modules: {
  }
})
